<template>
    <div class="history-container">
        <div class="tab-nav">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="转账" name="first">
                    <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
                        <el-radio-button label="all">全部</el-radio-button>
                        <el-radio-button label="time">按时间范围筛选</el-radio-button>
                        <el-radio-button label="type">
                            <div class="box">
                                <el-dropdown trigger="click">
                                      <span class="el-dropdown-link">
                                          按币种筛选
                                          <i class="el-icon-arrow-down el-icon--right"></i>
                                      </span>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item>ETH</el-dropdown-item>
                                        <el-dropdown-item>RMB</el-dropdown-item>
                                        <el-dropdown-item>ETW</el-dropdown-item>
                                        <el-dropdown-item>XXX</el-dropdown-item>
                                        <el-dropdown-item>YYY</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </div>
                            <!--<el-select v-model="value" placeholder="请选择">-->
                                <!--<el-option-->
                                        <!--v-for="item in options"-->
                                        <!--:key="item.value"-->
                                        <!--:label="item.label"-->
                                        <!--:value="item.value">-->
                                <!--</el-option>-->
                            <!--</el-select>-->
                        </el-radio-button>
                    </el-radio-group>
                    <ul class="list-container">
                        <li>
                            <div class="list-inner-left">
                                <p>31/01/2018 17:54</p>
                                <p>RUPJDFNS8WAXKJFHGMCAWEK4SD7WS4Q7</p>
                                <p>
                                    <a>Show Bundle</a>
                                    <a style="color: #0866b1; margin-left: 5px;">等待确认</a>
                                </p>
                            </div>
                            <div class="list-inner-right">
                                0eth
                            </div>
                        </li>
                    </ul>
                    <div class="block-paging">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="currentPage4"
                                :page-sizes="[8, 16, 24, 32]"
                                :page-size="4"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="32">
                        </el-pagination>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="入账" name="second">入账</el-tab-pane>
                <el-tab-pane label="地址" name="third">
                    <div>
                        <ul class="address-list">
                            <li>
                                RUPJDFNS8WAXKJFHGMCAWEK4SD7WS4Q7RUPJDFNS8WAXKJFHGMCAWEK4SD7WS4Q7
                            </li>
                            <li>
                                RUPJDFNS8WAXKJFHGMCAWEK4SD7WS4Q7RUPJDFNS8WAXKJFHGMCAWEK4SD7WS4Q7
                            </li>
                            <li>
                                RUPJDFNS8WAXKJFHGMCAWEK4SD7WS4Q7RUPJDFNS8WAXKJFHGMCAWEK4SD7WS4Q7
                            </li>
                            <li>
                                RUPJDFNS8WAXKJFHGMCAWEK4SD7WS4Q7RUPJDFNS8WAXKJFHGMCAWEK4SD7WS4Q7
                            </li>
                            <li>
                                RUPJDFNS8WAXKJFHGMCAWEK4SD7WS4Q7RUPJDFNS8WAXKJFHGMCAWEK4SD7WS4Q7
                            </li>
                            <li>
                                RUPJDFNS8WAXKJFHGMCAWEK4SD7WS4Q7RUPJDFNS8WAXKJFHGMCAWEK4SD7WS4Q7
                            </li>
                            <li>
                                RUPJDFNS8WAXKJFHGMCAWEK4SD7WS4Q7RUPJDFNS8WAXKJFHGMCAWEK4SD7WS4Q7
                            </li>
                            <li>
                                RUPJDFNS8WAXKJFHGMCAWEK4SD7WS4Q7RUPJDFNS8WAXKJFHGMCAWEK4SD7WS4Q7
                            </li>
                            <li>
                                RUPJDFNS8WAXKJFHGMCAWEK4SD7WS4Q7RUPJDFNS8WAXKJFHGMCAWEK4SD7WS4Q7
                            </li>
                        </ul>
                        <div class="block-paging">
                            <el-pagination
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="currentPage4"
                                    :page-sizes="[8, 16, 24, 32]"
                                    :page-size="4"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="32">
                            </el-pagination>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                activeName: 'first',
                tabPosition: 'top',
                currentPage1: 5,
                currentPage2: 5,
                currentPage3: 5,
                currentPage4: 4
            };
        },
        methods: {
            handleClick(tab, event) {
//                console.log(tab, event);
            },
            handleClick() {
//                alert('button click');
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
        }
    };
</script>
<style>
    .history-container{
        width: 700px;
        height: auto;
        margin: 0 auto;
    }
    .tab-nav{
        margin: 20px 0;
    }
    .history-container .el-tabs__nav-wrap::after{
        height: 0;
    }
    .history-container .el-tabs__nav{
        transform: translateX(270px) !important;
    }
    .history-container .el-radio-button__inner{
        padding: 12px 6px;
        font-size: 12px;
    }
    .history-container .el-dropdown{
        font-size: 12px;
    }
    .history-container .el-dropdown-menu__item{
        padding: 0 20px;
    }
    .history-container .el-radio-button__inner {
        background-color: transparent;
    }
    /*.history-container .el-radio-button:last-child .el-radio-button__inner{*/
        /*padding: 0;*/
    /*}*/
    /*.history-container .el-input__inner{*/
        /*border: none;*/
        /*height: 38px;*/
        /*padding: 0;*/
    /*}*/
    .list-container li{
        padding: 20px 0;
        border-bottom: 1px #ccc solid;
        display: flex;
        justify-content: space-between;
    }
    .list-inner-left p{
        font-size: 15px;
        line-height: 30px;
    }
    .list-inner-right{

    }
    .history-container .block-paging{
        margin-top: 30px;
    }
    .address-list li{
        padding: 20px 0;
        font-size: 15px;
        border-bottom: 1px #ccc solid;
    }
</style>